<template>
  <div class="tree__wrap">
    <div class="hd" v-if="title || plus">
      <div>
        <h6 v-if="title">{{ title }}</h6>
      </div>
      <i
        class="el-icon-plus"
        @click="addTreeNodeInput({ label: 'parent', parentId: rootNodeId })"
        v-if="plus"
      ></i>
    </div>
    <el-tree
      :data="data"
      highlight-current
      icon-class="el-icon-arrow-right"
      node-key="id"
      default-expand-all
      :expand-on-click-node="expandOnClickNode"
      @node-click="(data, node, nodes) => $emit('node-click', data, node, nodes)"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }" v-if="data.name">
        <div class="title">
          <svg-icon icon-class="ic_leibie1" />
          <span :class="{ 'active': plus }">{{ data[[defaultProps.label]] }}</span>
        </div>
    
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    plus: Boolean,
    data: Array,
    action: Boolean,
    rootNodeId: [Number, String],
    expandOnClickNode: {
      type: Boolean,
      default: false
    },
    level: {
      type: Number,
      default: 0
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "childrenList",
          label: "name"
        };
      }
    }
  },
  data() {
    return {
      treeInputKey: null,
      addKey: null,
      source: null,
      ellipsis: false,
      parentId: null,
      id: null
    };
  },
  methods: {
    async sort(upOrDown, { data }) {
      const res = await this.$store.dispatch("category/fetchPostSelectChildNodesSortChange", {
        ...data,
        upOrDown
      });
      if (!res) return false;
      this.$emit("on-success");
    },
    checkOverflow(ev) {
      const el = ev.target;
      if (el.scrollWidth > el.clientWidth) return (this.ellipsis = true);
      return (this.ellipsis = true);
    },
    handleCommand(command) {
      switch (command.type) {
        case "delete":
          this.deleteItem(command.id);
          break;
        case "add":
          this.addTreeNodeInput({ ...command, parentId: command.id });
          break;
        case "rename":
          this.id = command.data.id;
          this.modifyNodeInput(command);
          break;
      }
    },
    deleteItem(id) {
      this.$confirm("该操作将会删除代码属性你确定还要删除吗?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const res = await this.$store.dispatch('category/fetchDeleteMenu', {
          id
        })
        if (!res) return false;
        this.$emit('get-list')
      });
    },
    addTreeNodeInput(data) {
      this.addKey = data.label;
      this.parentId = data.parentId;
      if (data.label === "parent") {
        this.data.push({});
      } else {
        data.children.push({});
      }
      setTimeout(() => {
        this.$refs.addInput.focus();
      });
    },
    modifyNodeInput({ node, data }) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      this.treeInputKey = data.name;
      this.source = data.name;
      children[index].name = null;
      setTimeout(() => {
        this.$refs.addInput.focus();
      });
    },
    async addTreeNode(keyWord) {
      if (keyWord !== this.source) {
        await this.$store.dispatch(
          `category/${
            this.id ? "fetchPostUpdateChildNode" : "fetchPostAddChildNode"
          }`,
          {
            parentId: this.parentId,
            id: this.id,
            name: keyWord
          }
        );
      }
      this.$emit("on-success");

      this.treeInputKey = null;
      this.source = null;
      this.parentId = null;
      this.id = null;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.tree__wrap {
  width: 100%;
  height: 100%;
  background: #fff;
  .hd {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > div {
      width: 80%;
    }
    h6 {
      @include textEllipsis;
      font-size: 16px;
    }
    i {
      cursor: pointer;
      &:hover {
        color: $--color-primary;
      }
    }
  }
  /deep/ .el-tree {
    padding: 0 14px;
    max-height: calc(100% - 58px);
    @include scrollBar;

    .el-tree-node__content {
      position: relative;
      overflow: hidden;
      .custom-tree-node {
        width: calc(100% - 24px);
        min-width: 60px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        padding-right: 8px;
        .title {
          @include textEllipsis;
          &.active {
            width: calc(100% - 62px);
          }
        }
        .svg-icon {
          margin-right: 10px;
          font-size: 16px;
        }
        .el-input,
        .el-input__inner {
          height: 100%;
        }
        .icon__wrap {
          height: 26px;
          display: flex;
          align-items: center;
          opacity: 0;
          .icon {
            margin-right: 5px;
          }
        }
      }
    }
    .el-tree-node__content:hover .icon__wrap {
      opacity: 1 !important;
    }
  }
}
</style>
